<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 在vue中，凡是以v- 开头的，都称之为指令  -->
				<!-- v-cloak 实质上使用的是css中display属性，控制数据差值表达式内容的显示和隐藏 -->
				<!-- <li v-cloak>{{ msg }}</li> -->
				<!-- 差值表达式  -->
				<li><button type="button" v-on:click="change()">改变数据</button></li>
				<!-- <li v-text="test"></li> -->
				<!-- 相当于innerTest -->
				<!-- <li v-text="test2"></li> -->
				<!-- <li v-html="test2"></li> -->
				<!-- 相当于innerHtml -->
				<!-- <li v-pre>{{msg}}</li> -->
				<!-- 将标签内部值，原样输出，不做任何改变，类似<pre>标记 -->
				<!-- <li><input type="button" v-model="msg" /></li> -->
				<!-- 必须要有表单；使用v-model命令 -->
				<!-- <li v-once="msg"></li> -->
				<!-- 只在页面第一次渲染时执行结果 -->
				
				<!--  -表单的修饰符都是放在v-model的后面，对表单的功能其辅助作用 -->
				<li><input type="button" v-model.lazy.number="msg" /></li>
				<!-- lazy修饰符等同于onblur事件 -->
				<!-- number修饰符将字符串的内容转化成数字 -->
				
				<li>{{msg}}</li>
				
				
			</ul>
			
			<!-- ---------------------------------------------- -->
			
			<ul>
				<li><input type="checkbox" value="css" v-model="checkedNames">css</li>
				<li><input type="checkbox" value="html"  v-model="checkedNames">html</li>
				<li><input type="checkbox" value="javascript" v-model="checkedNames">javascript</li>
				<li><input type="checkbox" value="java"  v-model="checkedNames">java</li>
			</ul>
			<span>选择的值为: {{ checkedNames }}</span>
		</div>
		<script>
			let myApp = new Vue({
				el:'#app',
				data:{
					//放到data的中的数据才是响应式数据
					//后台传给我们前端的数据
					msg:'我是vue的测试数据',
					test:'我是vue的测试数据',
					test2:'<h1>我是vue的测试数据</h1>',
					checked:false,
					checkedNames:[]
				},
				methods:{
					//各种常规的方法
					change(){
						this.msg = '天青色等烟雨，。。。。'
					}
				}
				
			})
			
			// myApp.$el.style.color = 'red'
			
			//响应式数据：数据发生变化，页面中的数据会同时发生变化
			
		</script>
	</body>
</html>
